<h1>Mostrar Maquina</h1>
<% content_for :googlemaps do %>
  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
  <script type="text/javascript">
    var centro = new google.maps.LatLng(<%= @maquina.latitud %>,<%= @maquina.longitud %>);
    var marker;
    var map;
    var point;

    function initialize() {
      var mapOptions = {
        zoom: 14,
        mapTypeId: google.maps.MapTypeId.HYBRID,
        center: centro
      };

      map = new google.maps.Map(document.getElementById("map_canvas"),
      mapOptions);

      marker = new google.maps.Marker({
        map:map,
        animation: google.maps.Animation.DROP,
        position: centro
      });
      google.maps.event.addListener(marker, 'click', toggleBounce);
      google.maps.event.addListener(marker, 'dragend', coordinates);
    }

    function toggleBounce() {
      if (marker.getAnimation() != null) {
        marker.setAnimation(null);
      } else {
        marker.setAnimation(google.maps.Animation.BOUNCE);
      }
    }

    function coordinates() {
      var point = new google.maps.LatLng(marker.getPosition().lat(),marker.getPosition().lng(),true);
      map.panTo(point);
      document.getElementById("maquina_latitud").value = point.lat();
      document.getElementById("maquina_longitud").value = point.lng();
    }

  </script>
<% end %>
<table>
<tr>
    <td>
        <p>
          <b>Nombre:</b>
          <%=h @maquina.nombre %>
        </p>

        <p>
          <b>Descripcion:</b>
          <%=h @maquina.descripcion %>
        </p>
        <p>
          <b>Status:</b>
          <%=h @maquina.status %>
        </p>
    </td>
    <td>`
        <img src="/images/libretaresultados.jpg" alt="" width="200" height="200" />
    </td>
</tr>
</table>

<div  id="map_canvas" style="width:600px; height:315px"> </div>


<div align="center"><%= link_to '<img src="/images/Pencil.png" alt="" width="50" height="50" />', edit_maquina_path(@maquina) %> &ensp; &ensp; <%= link_to '<img src="/images/back.png" alt="" width="50" height="50" />', maquinas_path%></div>
<div align="center"><%= link_to 'Editar', edit_categoria_path(@maquina) %> &ensp; &ensp; &ensp; &ensp; <%= link_to 'Regresar', maquinas_path%></div>
